{% extends 'base.html' %}
{% block ext_css %}
    <link rel="stylesheet" href="/static/blog/verifyJs/css/verify.css">
    <script type="text/javascript" src="/static/blog/verifyJs/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/static/blog/verifyJs/js/verify.js"></script>
    <style>
        #avatar{
            display: none;
        }

        #avatar_img{
            margin-left: 30px;
        }

        .error{
            color: red;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-offset-3">
                <h3>用户注册</h3>
                <form id="form_register">
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="form-group">
                            <label for={{ field.name }}>{{ field.label }}</label>
                            {{ field }} <span class="error pull-right"></span>
                        </div>
                    {% endfor %}

                    <div class="form-group">
                    <label for="avatar">
                        <span>头像</span>
                        <img id="avatar_img" src="/static/blog/img/default.png" width="60" height="60" alt="头像">
                        </label>
                    <input style="display: none" type="file" class="file-upload" id="avatar">
                    </div>


                    <button type="button" class="btn btn-success reg_btn">注册</button>
                    <span id="loginerror" style="color: red"></span>

                    <a href="{% url "blogsystem:login" %}" class="btn btn-success pull-right">返回登陆</a>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block ext_js %}
    <script src="/static/JS/jquery.min.js"></script>

    <script src="/static/user/js/register.js"></script>
{% endblock %}